<template>
	<view class="content">
		<transition name="fade" :duration="1000">
			<!-- <text v-if="show">hello</text> -->
			<view class="subject" v-if="show">
				<view class="questionText">
					<view class="questionNo">
						<text>{{dataIndex + 1}}、</text>
						<text class="readTips" v-if="dataList[dataIndex].subjectType == 2">(阅读类需要连续阅读最少15秒)</text>
						<text class="readTips" v-if="dataList[dataIndex].subjectType == 1">(选择类选择你认为对的选项)</text>
					</view>

					<view style="white-space: pre-line">{{dataList[dataIndex].subject}}</view>
					<!-- <image class="dongwu" v-if="dataList[dataIndex].subjectType == 2"
						:src="doneUrl[answerResult[dataIndex].answerResult]" mode=""></image> -->
				</view>
				<template v-if="dataList[dataIndex].subjectType == 1">
					<view class="options"
						:class="item.answerResult == 1 ? 'optionsActive' : item.answerResult == 2 ? 'optionsActiveError' : ''"
						v-for="(item, index) in dataList[dataIndex].options" :key="index" @click="optionsAnswer(index)">
						{{item.text}}
					</view>
					<view class="myAnswer" v-if="dataList[dataIndex].answerResult">
						<view class="myAnswerLeft">我的选择：{{list[dataList[dataIndex].optionsIndex]}}</view>
						<view class="myAnswerRight">正确选项：{{dataList[dataIndex].answer}}</view>
					</view>
					<view class="analysis" v-if="dataList[dataIndex].answerResult">
						<text class="jiagshu">讲述：</text>
						<rich-text :nodes="dataList[dataIndex].analysis"></rich-text>
					</view>
				</template>

				<!-- 阅读类倒计时 -->
			<!-- 	<view class="readTime"
					v-if="dataList[dataIndex].subjectType == 2 && !answerResult[dataIndex].answerResult">{{readTime}}s
				</view> -->
			</view>

		</transition>
		
		<!-- #ifdef H5 -->
		<view class="adBox" v-if="show && 0">
			<ad adpid="1237469372" :ad-height="adHeight" type="feeds"></ad>
		</view>
		<!-- #endif -->

		<view class="footerBut">
			<view class="leftBut" @click="upSubject">
				<view class="iconfont icon-jiantou_zuo"></view>
				<view> 上一题</view>
			</view>
			<view class="rightBut integral">
				积分{{integral}}
				<view class="addIntegral" :class="{'addIntegralAnimation':addIntegralAnimationShow }">+1</view>
			</view>
			<view class="rightBut" @click="nextSubject">
				<view>下一题 </view>
				<view class="iconfont icon-jiantou_you"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		history
	} from '../../utils/historyData.js'
	import geography from '../../utils/geographyData.js'
	import botany from '../../utils/botanyData.js'
	import animal from '../../utils/animalData.js'
	import {
		mapState
	} from 'vuex'
	import {
		addIntegral,
		getTime
	} from '../../utils/index.js'
	export default {
		data() {
			return {
				answerResult: [],
				adHeight: 100,
				show: false,
				list: ['A', 'B', 'C', 'D'],
				dataIndex: 0,
				subjectId: null,
				typeId: null,
				title: '',
				dataList: [],
				integral: 0 ,// 积分
				addIntegralAnimationShow: false // 加积分动效
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad(ops) {
			this.subjectId = String(ops.subjectId)
			this.baseId = ops.baseId
			this.title = ops.title
			uni.setNavigationBarTitle({
				title: ops.title
			})
		},
		onShow() {
			console.log(this.userInfo)
			// 数据初始化
			this.init()
		},
		methods: {
			init() {
				// this.answerResult = [{
				// 	optionsIndex: null,
				// 	answerResult: 0
				// }]
				this.$http.getSubjectList({id: this.baseId}).then((res) => {
					res.forEach(item => {
						item.answerResult = 0
						item.optionsIndex = null
					})
					this.dataList = res
					this.show = true
					// 处理本题是否完成过
					this.handleSubjectStatus(this.dataIndex)
				})
				
				
				
			},
			handleSubjectStatus(index) {
				let dayTime = getTime()
				let dayTimeStorageData = uni.getStorageSync(dayTime)
				
				if (!dayTimeStorageData[this.dataList[index].answerId]) return
				this.dataList[this.dataIndex].options[dayTimeStorageData[this.dataList[index].answerId].optionsIndex].answerResult = dayTimeStorageData[this.dataList[index].answerId].answerResult
				this.dataList[this.dataIndex].answerResult = dayTimeStorageData[this.dataList[index].answerId].answerResult
				this.dataList[this.dataIndex].optionsIndex = dayTimeStorageData[this.dataList[index].answerId].optionsIndex
			},
			// 选择题
			optionsAnswer(index) {
				if(this.dataList[this.dataIndex].answerResult !== 0) return
				if (this.list[index] == this.dataList[this.dataIndex].answer) {
					this.dataList[this.dataIndex].options[index].answerResult = 1
					this.dataList[this.dataIndex].answerResult = 1
					this.$http.addIntegral({baseId: this.baseId, userId: this.userInfo.userId}).then((res) => {
						console.log(res)
					})
				} else if (this.list[index] != this.dataList[this.dataIndex].answer) {
					this.dataList[this.dataIndex].options[index].answerResult = 2
					this.dataList[this.dataIndex].answerResult = 2
				}
				this.dataList[this.dataIndex].optionsIndex = index
				
				// 存数据
				// console.log(this.dataList[this.dataIndex].answerId, this.subjectId)
				let dayTime = getTime()
				let obj = uni.getStorageSync(dayTime)
				obj[this.dataList[this.dataIndex].answerId] = {
					answerId: this.dataList[this.dataIndex].answerId,
				  answerResult: this.dataList[this.dataIndex].options[index].answerResult,
					optionsIndex: index
					}
				uni.setStorageSync(dayTime, obj)
				
			},
			// 下一题
			nextSubject() {
				

				if (this.dataIndex == this.dataList.length - 1) {
					uni.showToast({
						title: '已经是最后一个了！',
						icon: "none"
					})
					return
				}
				
				this.show = true
				if (!this.show) return
				if (this.dataIndex < this.dataList.length - 1 && this.show) {
					this.show = false
					this.dataIndex = this.dataIndex + 1
					this.handleSubjectStatus(this.dataIndex)
					let timer = null
					timer = setTimeout(() => {
						this.show = true
						clearTimeout(timer)
						timer = null
					}, 100)
				}

			},
			// 上一题
			upSubject() {
				if (this.dataIndex == 0) {
					uni.showToast({
						title: '已经到头了！',
						icon: "none"
					})
					return
				}

				if (!this.show) return

				if (this.dataIndex > 0 && this.show) {
					this.show = false
					this.dataIndex = this.dataIndex - 1
					this.handleSubjectStatus(this.dataIndex)
					let timer = null
					timer = setTimeout(() => {
						this.show = true
						clearTimeout(timer)
						timer = null
					}, 100)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 25rpx 25rpx 140rpx;
		// background-color: #F8F8F8;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity .5s;
	}

	.fade-enter,
	.fade-leave-to

	/* .fade-leave-active below version 2.1.8 */
		{
		opacity: 0;
	}

	.subject {
		// width: 700rpx;
		position: relative;
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 2px 2px 40rpx #ccc;

		.dongwu {
			position: absolute;
			top: 15rpx;
			right: 15rpx;
			z-index: 1;
			width: 80rpx;
			height: 80rpx;
		}

		.questionText {
			display: flex;
			// align-items: center;
			flex-wrap: wrap;
			margin-bottom: 40rpx;
			font-size: 32rpx;
			line-height: 50rpx;

			.questionNo {
				color: #3396ff;
				font-weight: 700;
			}

			.readTips {
				font-size: 30rpx;
				color: #bbb;
			}
		}

		.options {
			margin-top: 25rpx;
			font-size: 28rpx;
			line-height: 50rpx;
			padding: 25rpx;
			border-radius: 10rpx;
			box-shadow: 2px 2px 10px #e1e5e9;
		}

		.optionsActive {
			background: #5ED969;
			color: #fff;
		}

		.optionsActiveError {
			background: #FF9000;
			color: #fff;
		}

		.myAnswer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 50rpx;
			font-size: 28rpx;

			.myAnswerLeft {
				margin-left: 10rpx;
				color: #FF9000;
			}

			.myAnswerRight {
				color: #3396ff;
				margin-right: 10rpx;
			}
		}

		.analysis {
			margin-top: 50rpx;
			padding-top: 50rpx;
			font-size: 30rpx;
			line-height: 44rpx;
			border-top: 1rpx solid #eee;

			.jiagshu {
				font-weight: 700;
			}
		}
	}

.adBox{
	height: 160px;
	margin-top: 50rpx;
	overflow: hidden;
}
	.readBox {
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 2px 2px 40rpx #ccc;
	}

	.footerBut {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 90rpx;
		box-shadow: 10rpx 0rpx 10rpx #ddd;
		background: #fff;
		padding-bottom: env(safe-area-inset-bottom);

		.leftBut,
		.rightBut {
			display: flex;
			align-items: center;
			padding: 25rpx;
			// background: #000;
			color: #7cb7ff;
		}

		.integral {
			position: relative;
		}

		.addIntegral {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			font-weight: 700;
			color: #fff;
		}

		.addIntegralAnimation {
			animation: myfirst 2s;
		}

		@keyframes myfirst {
			0% {
				color: #7cb7ff;
				top: -10rpx
			}

			100% {
				color: #fff;
				top: 10rpx
			}
		}

		.icon-jiantou_zuo,
		.icon-jiantou_you {
			position: relative;
			top: 0rpx;
			font-size: 30rpx;
		}
	}

	.readTime {
		position: fixed;
		bottom: 200rpx;
		right: 40rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50%;
		color: #7cb7ff;
		// border: 1px solid #ddd;
		box-shadow: 2px 2px 40rpx #ccc;
		background-color: #fff;
	}
</style>
